<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手写Hash Router</title>
  </head>
  <body>
    <nav id="nav">
      <li><a href="#/page1">page1</a></li>
      <li><a href="#/page2">page2</a></li>
      <li><a href="#/page3">page3</a></li>
    </nav>

    <!-- hash router -->
    <div id="container"></div>

    <script>
      // hash url 改变 页面没有刷新 SPA 的一种可能
      // #/page1 page1 -> container
      // #/page2 page2 -> container
      class HashRouter {
        constructor() {
          this.routes = {};
          window.addEventListener('hashchange', this.load.bind(this), false);
        }

        register(hash, callback = function () {}) {
          this.routes[hash] = callback;
        }

        registerIndex(callback = function () {}) {
          this.routes['index'] = callback;
        }

        load() {
          console.log(location.hash); // BOM
          let hash = location.hash.slice(1); // 去掉 # 才是路由
          let handler;

          console.log(hash, '//////');
          if (!hash) {
            // 首页
            handler = this.routes['index'];
          } else {
            // 相应页面
            handler = this.routes[hash];
          }
          handler && handler.call(this);
        }
      }

      let router = new HashRouter();
      const container = document.querySelector('#container');
      router.registerIndex(() => (container.innerHTML = '我是首页'));
      router.register('/page1', () => (container.innerHTML = '我是page1'));
      router.register('/page2', function () {
        console.log(this, this.routes);
        container.innerHTML = '我是page2';
      });
      router.register('/page3', () => (container.innerHTML = '我是page3'));
      console.log(router.routes);
      router.load(); // 页面加载时调用一次
    </script>
  </body>
</html>
